<template>
  <div class="login-register-container">
    <el-form v-if="isLogin" @submit.prevent="handleLogin" class="form" :model="loginForm" label-width="80px">
      <el-form-item label="账号" :rules="[{ required: true, message: '账号不能为空', trigger: 'blur' }]">
        <el-input v-model="loginForm.account" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="密码" :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]">
        <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">登录</el-button>
      </el-form-item>
    </el-form>
    <el-form v-else @submit.prevent="handleRegister" class="form" :model="registerForm" label-width="80px">
      <el-form-item label="角色">
        <el-radio-group v-model="isCustomer">
          <el-radio-button :label="true">客户</el-radio-button>
          <el-radio-button :label="false">员工</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="账号" :rules="[{ required: true, message: '账号不能为空', trigger: 'blur' }]">
        <el-input v-model="registerForm.account" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="姓名" :rules="[{ required: true, message: '姓名不能为空', trigger: 'blur' }]">
        <el-input v-model="registerForm.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item v-if="isCustomer" label="公司" :rules="[{ required: true, message: '公司名称不能为空', trigger: 'blur' }]">
        <el-input v-model="registerForm.company" placeholder="请输入公司名称" />
      </el-form-item>
      <el-form-item v-if="isCustomer" label="电话" :rules="[{ required: true, message: '联系电话不能为空', trigger: 'blur' }]">
        <el-input v-model="registerForm.phone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="密码" :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]">
        <el-input v-model="registerForm.password" placeholder="请输入密码" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">提交注册</el-button>
      </el-form-item>
    </el-form>
    <div class="switch-text" @click="isLogin = !isLogin, t = false">
      {{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { login, register} from '../utils/login/login.js'
import { useUserStore } from '../stores/UserStore'
import { useRouter } from 'vue-router';

const UserStore = useUserStore()
const router = useRouter()
const t = ref(false);
const isLogin = ref(true);
const registerForm = ref({ account: '', name: '', company: '', phone: '', password: '' });
const loginForm = ref({ account: '', password: '' });
const isCustomer = ref(true);

// 注册接口
const handleRegister = async () => {
  try {
    const response = await register({
        "account": registerForm.value.account,
        "password": registerForm.value.password,
        "role": isCustomer.value ? 'customer' : 'staff',
        "name": registerForm.value.name,
        "company": isCustomer.value ? registerForm.value.company : null,
        "phone": isCustomer.value ? registerForm.value.phone : null,
    });
    //如果response.data.code ！= 200，提示错误信息
    if (response.data.code!== 200) {
      ElMessage.error(response.data.message);
      return;
    }
    ElMessage.success('注册成功');
    isLogin.value = true;
  } catch (error) {
    ElMessage.error('注册失败');
  }
};

// 登录接口
const handleLogin = async () => {
  try {
    const response = await login({
        "account": loginForm.value.account,
        "password": loginForm.value.password
    });

    //如果response.data.code ！= 200，提示错误信息
    if (response.data.code !== 200) {
      ElMessage.error(response.data.message);
      return;
    }
    
    ElMessage.success('登录成功');
    // 登录成功后，跳转到首页
    const role = await UserStore.setUser(response)
    if(role === 'customer') {
      router.push('/customer/home')
    }else if (role === 'staff') {
      router.push('/staff/status')
    }else if(role ==='admin') {
      router.push('/admin/meeting-rooms') 
    }
  } catch (error) {
    ElMessage.error('登录失败:', error);
  }
};
</script>

<style scoped>
.login-register-container {
  width: 420px;
  padding: 40px;
  border-radius: 24px;
  margin-top: 80px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95);
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.switch-text {
  text-align: center;
  margin-top: 24px;
  cursor: pointer;
  color: #3949ab;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  padding: 8px;
  border-radius: 8px;
}

.switch-text:hover {
  background-color: rgba(57, 73, 171, 0.1);
  transform: scale(1.02);
}

.form {
  background: white;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin: 20px 0;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #1a237e;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #3949ab;
}

:deep(.el-button--primary) {
  background: linear-gradient(90deg, #3949ab 0%, #5c6bc0 100%);
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(57, 73, 171, 0.2);
  width: 100%;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(57, 73, 171, 0.3);
}

:deep(.el-radio-button__inner) {
  border-radius: 8px;
  padding: 12px 24px;
  transition: all 0.3s ease;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: linear-gradient(90deg, #3949ab 0%, #5c6bc0 100%);
  border-color: #3949ab;
  box-shadow: 0 4px 12px rgba(57, 73, 171, 0.2);
}

:deep(.el-radio-group) {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

:deep(.el-radio-button) {
  flex: 1;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-radius: 8px 0 0 8px;
}

:deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 0 8px 8px 0;
}

@media (max-width: 480px) {
  .login-register-container {
    width: 90%;
    padding: 24px;
  }
  
  .form {
    padding: 20px;
  }
}
</style>